<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="userApp" ng-controller="userCtrl">
    <div class="container">
        <h3 class="page-header">用户列表</h3>
        <table class="table table-striped table-bordered">
            <thead>
                <tr class="success">
                    <td>编号</td><td>用户名</td><td>姓名</td>
                    <td>
                        操作
                        <button class="btn btn-sm btn-primary" ng-click="createUser()">
                        <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;create
                    </button>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="u in user">
                    <td>{{u.code}}</td><td>{{u.username}}</td><td>{{u.name}}</td>
                    <td>
                        <button class="btn btn-sm btn-success" ng-click="editUser(u.code)">
                            <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
                        </button>
                        <button class="btn btn-sm btn-danger" ng-click="deleteUser(u.code)">
                            <span class="glyphicon glyphicon-minus"></span>&nbsp;&nbsp;delete
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h3 class="page-header">用户信息表单</h3>
        <form class="form-horizontal" name="userForm">
            <div class="form-group">
                <label class="col-sm-2 control-label">编号</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="code" ng-disabled="edit" placeholder="编号" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="username" ng-disabled="edit" placeholder="用户名" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="password"  placeholder="密码" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">重复密码</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="password2"  placeholder="重复密码" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="name" placeholder="姓名" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="age" placeholder="年龄" class="form-control">
                </div>
            </div>
            <div class="form-group {{vclass}} has-feedback">
                <label class="control-label col-sm-2">邮箱</label>
                <div class="col-sm-10">
                    <input type="email" name="emailstr" ng-model="emailstr"  placeholder="邮箱" class="form-control">
                    <span class="glyphicon glyphicon-remove form-control-feedback" ng-hide="!userForm.emailstr.$error.email&&userForm.emailstr.$dirty && userForm.emailstr.$valid"></span>
                    <span class="glyphicon glyphicon-ok form-control-feedback"  ng-show="!userForm.emailstr.$error.email&&userForm.emailstr.$dirty && userForm.emailstr.$valid"></span>
                </div>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="col-sm-2"></label>
                <div class="col-sm-10">
                    <button class="btn btn-success" ng-disabled="error || incomplete" ng-click="saveUser()">
                        <span class="glyphicon glyphicon-save"></span>修改
                    </button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2">
                    error:{{error}}
                </div>
                <div class="col-sm-2">
                    incomplete:{{incomplete}}
                </div>
                <div class="col-sm-2">
                    userForm.emailstr.$dirty:{{userForm.emailstr.$dirty}}
                </div>
                <div class="col-sm-2">
                    userForm.emailstr.$invalid:{{userForm.emailstr.$dirty && userForm.emailstr.$valid}}
                </div>
                <div class="col-sm-2">
                     vclass:{{vclass}}
                </div>
                <div class="col-sm-2">
                    userForm.emailstr.$error.email:{{userForm.emailstr.$error.email}}
                </div>
            </div>
        </form>
    </div>
    <script>
        var userApp=angular.module("userApp",[]);
        userApp.controller("userCtrl",function ($scope) {
            $scope.vlcass="1";
            $scope.error=false;
            $scope.incomplete=false;
            $scope.emailstr="";
            $scope.user=[
                {
                    "code":"001","username":"admin01","name":"a01"
                },{
                    "code":"002","username":"admin02","name":"a02"
                },{
                    "code":"003","username":"admin03","name":"a03"
                },{
                    "code":"004","username":"admin04","name":"a04"
                },{
                    "code":"005","username":"admin05","name":"a05"
                }
            ];
            $scope.createUser=function () {
                $scope.edit=false;
                $scope.code="";
                $scope.username="";
                $scope.name="";
            }
            $scope.editUser=function (code) {
                $scope.edit=true;
                for(var i in $scope.user){
                    var u=$scope.user[i];
                    if(u.code==code){
                        $scope.code=u.code;
                        $scope.username=u.username;
                        $scope.name=u.name;
                        break;
                    }
                }
            }
            $scope.saveUser=function () {
                var tableNode= angular.element("table");
                if($scope.edit){

                }else{
                    tableNode.append("<tr><td>"+$scope.code+"</td><td>"+$scope.username+"</td><td>"+$scope.name+"</td><td></td></tr>");
                }
            }
            $scope.$watch('emailstr',function() {$scope.testemail(); });
            $scope.$watch('password',function() {$scope.test();});
            $scope.$watch('password2',function() {$scope.test();});
            $scope.test=function () {
                if($scope.password!=$scope.password2){
                    $scope.error=true;
                }else{
                    $scope.error=false;
                }
            }
            $scope.testemail=function () {
                if($scope.emailstr){
                    if($scope.emailstr.length==0||$scope.emailstr.indexOf("@")==-1){
                        $scope.vclass="has-error";
                    }else{
                        $scope.vclass="has-success";
                    }
                }else{
                    $scope.vclass="has-error";
                }
            }
            $scope.deleteUser=function (code) {
                angular.element("td:contains('"+code+"')").parent().remove();
            }
        });
    </script>
</body>
</html>